<template>
  <!-- 开通会员管理 -->
  <!-- 杨珅 2023年6月15日19:33:19 -->
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-s-home" style="font-weight:bold"></i>  后台管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">开通会员管理</a></el-breadcrumb-item>
        <el-breadcrumb-item></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card style="margin-top:20px">
      <div style="background-color:white;">
        <el-button type="primary" @click="openadd()" style="margin-left:1050px;" size="small">新增</el-button>
        <!-- 全查 -->
        <el-table :data="RecordData" style="width: 100%; margin-top: 10px; margin-left: 15px;"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="userName" label="开通用户">
          </el-table-column>
          <el-table-column prop="memberType" label="开同类型">
          </el-table-column>
          <el-table-column prop="number" label="开通数量">
          </el-table-column>
          <el-table-column prop="openTime" label="开通时间">
          </el-table-column>
          <el-table-column prop="closeTime" label="到期时间">
          </el-table-column>
          <el-table-column prop="residueTime" label="剩余时间(天)">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <template slot-scope="scope">
              <el-button @click="openupdate(scope.row)"
              type="primary" size="small">修改</el-button>
              <el-button @click="deleteRecord(scope.row.id)"
              type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination :page-sizes="[7, 20, 30, 40]" :page-size="pages.pageSize" background
          layout="total, sizes, prev, pager, next, jumper" :total="pages.total" :current-page.sync="pages.pageNum"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
      </div>
      <!-- 添加修改弹窗 -->
      <el-dialog :visible.sync="updateadd" width="39%" :before-close="handleClose()" style="text-align:left">
        <div slot="title" class="header-title" style="text-align:left;font-weight: bold;color:white;font-size:18px;margin-bottom: 10px;">
          新增/编辑开通会员
        </div>
        <el-form stripe style="width: 100%" :model="addfrom">
         
          <el-form-item prop="userId" width="200">
            <span style="font-weight:900;color:rgb(93,142,255)">|</span>
            <span style="margin-left:20px">开通用户</span>
            <el-select v-model="addfrom.userId" placeholder="请选择开通用户"  style="margin-left:20px">
              <el-option :label="item.userName" :value="item.id" v-for="item in selectData"
                :key="item.id"></el-option>
            </el-select>
          </el-form-item>

          
          <el-form-item prop="memberId" width="200">
            <span style="font-weight:900;color:rgb(93,142,255)">|</span>
            <span style="margin-left:20px">开通类型</span>
            <el-select v-model="addfrom.memberId" placeholder="请选择开通类型" style="margin-left:20px">
              <el-option :label="item.memberType" :value="item.id" v-for="item in selectData1"
                :key="item.id"></el-option>
            </el-select>
          </el-form-item>

         
          <el-form-item prop="number" width="300">
            <span style="font-weight:900;color:rgb(93,142,255)">|</span>
            <span style="margin-left:20px">开通数量</span>
            <el-input style="width:500px;margin-left:20px" v-model="addfrom.number"></el-input>
          </el-form-item>

        </el-form>
        <div style="text-align:center">
          <el-button style="background-color:rgb(234,244,255);color:rgb(96,169,255)" @click="addRecord()">确 定</el-button>
          <el-button @click="updateadd = false" style="background-color:rgb(234,244,255);color:rgb(96,169,255)">取消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible4: false,
      selectData: [], //下拉数据
      selectData1: [], //下拉数据
      ids: [],//批量删除id
      //全查
      RecordData: [],
      //分页
      pages: {
        total: 0, //数据总条数
        pageNum: 1, //当前页
        pageSize: 7, //每页几条数据
      },
      //添加/编辑表单
      addfrom: {
        id: "",
        memberId: "",
        userId: "",
        number: "",
      },
      //添加修改弹窗
      updateadd: false,
      // 存放文件
      File: File,
    };
  },
  mounted() {
    this.getRecord()
  },
  methods: {

    //全查-模糊查
    getRecord() {
      this.$axios
        .get("/record/getRecord", {
          params: {
            pageNum: this.pages.pageNum, //当前页
            pageSize: this.pages.pageSize, //每页几条数据
          }
        })
        .then((res) => {
          if (res.data.code) {
            this.RecordData = res.data.data.content;
            this.pages.total = res.data.data.totalSize;
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },

    daochu() {
      this.$axios
        .get("/role/export", {
        })
        .then((res) => {
          if (res.data.status) {
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    //动态下拉用户数据
    selectuser() {
      this.$axios
        .get("/record/userSelect", {
        })
        .then((res) => {
          if (res.data.code) {
            this.selectData = res.data.data;
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    //动态下拉会员类型数据
    selectmember() {
      this.$axios
        .get("/record/memberSelect", {
        })
        .then((res) => {
          if (res.data.code) {
            this.selectData1 = res.data.data;
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    //打开添加弹窗
    openadd() {
      this.addfrom = {}//清空表单数据
      this.selectuser()//初始化下拉数据
      this.selectmember()//初始化下拉数据
      this.updateadd = true;
    },
    //打开编辑弹窗
    openupdate(data) {
      this.addfrom = JSON.parse(JSON.stringify(data)); //回显
      this.updateadd = true;
    },
    //添加/编辑
    addRecord() {
      if (!this.addfrom.id) {
        this.$axios
          .post("/record/addRecord", this.addfrom)
          .then((res) => {
            if (res.data.code) {
              this.myMessage("success", "添加成功");
              this.getRecord()//跳转全查页面
              this.updateadd = false
            }
          })
          .catch((err) => {
            this.myMessage("error", err);
          });
      } else {
        //修改信息
        this.$axios
          .put("/member/updateMember", this.addfrom)
          .then((res) => {
            if (res.data.code) {
              this.myMessage("success", "修改成功");
              this.getRecord()//跳转全查页面
              this.updateadd = false
            } else {
              this.myMessage("warning", "修改失败！");
            }
          });
      }
    },
    //选择数据数量
    handleSelectionChange(val) {
      this.ids = val.map(v => v.id)
      // this.$message.warning("选择了"+this.ids.length+"条数据");
    },
    //批量删除
    delBath() {
      this.$axios.post("/member/deleteMemberByIds", this.ids).then(res => {
        if (res) {
          this.$message.success("批量删除成功！");
          this.getMember()
        } else {
          this.$message.error("删除失败！");
        }
      })
    },
    //逻辑删除
    deleteRecord(id) {
      this.$confirm('此操作将注销用户彻底删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/record/deleteRecordById', {
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.myMessage('success', '删除成功')
            this.getRecord()
          } else {
            this.myMessage('warning', '删除失败')
          }
        }).catch(res => {
          this.myMessage('error', '删除失败，请联系管理员')
        })
      }).catch(res => {
        this.myMessage('info', '已取消删除')
      })
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type
      })
    },

    //分页
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.getRecord();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.getRecord();
    },
    //信息
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

  },
};
</script>